<template>
	<view class="container">
		<view class="top-box font32 gray333">
			上传照片
		</view>
		<view class="photo-box flex wrap">
			<view class="f-center img-view" v-for="(item,index) in imgList" :key="index">
				<image :src="item" class="img-item"></image>
				<view @click="deleteImg(index)" style="position: absolute;right: 0;top: 0;z-index: 99;background-color: #fff;border-radius: 50%;" class="f-center">
					<icon type="cancel" size="20" />
				</view>  
			</view>
			<view class="f-center add-btn" @click="takeHandle">+</view>
		</view>
		<view class="btn-box" @click="confirmSelect">
			<view class="btn font32 white f-center">上传</view>
		</view>
	</view>
</template>

<script>
	import { uploadImg } from '../utils/common.js'
	export default {
		data() {
			return {
				imgList: []
			}
		},
		onLoad(option) {
			this.imgList = JSON.parse(option.arr)
		},
		methods: {
			deleteImg(index) {
				this.imgList.splice(index, 1)
			},
			confirmSelect() {
				if (this.imgList.length == 0) {
					this.$api.msg('请拍照上传')
					return
				}

				this.$api.prePage().photoUrl = this.imgList
				setTimeout(() => {
					uni.navigateBack()
				}, 300)
			},
			takeHandle() {
				uploadImg().then(res => {
					const arr = []
					res.forEach(item => {
						var info = JSON.parse(item)
						if (info.code == 200) {
							arr.push(info.path)
						}
					})
					this.imgList = arr
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0;
		padding-bottom: 90rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 90rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 90rpx);

		.top-box {
			border-bottom: 2rpx solid #AAAAAA;
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 40rpx;
		}

		.photo-box {
			padding: 0 32rpx;
		}

		.img-view {
			width: 200rpx;
			height: 200rpx;
			margin-right: 28rpx;
			margin-top: 40rpx;
			position: relative;
		}

		.img-item {
			width: 200rpx;
			height: 200rpx;
		}

		.add-btn {
			width: 200rpx;
			height: 200rpx;
			border: 2rpx dashed #707070;
			font-size: 80rpx;
			color: #CCCCCC;
			font-weight: bolder;
			margin-right: 28rpx;
			margin-top: 40rpx;
			line-height: 200rpx;
		}

		.btn-box {
			width: 750rpx;
			height: calc(constant(safe-area-inset-bottom) + 90rpx);
			height: calc(env(safe-area-inset-bottom) + 90rpx);
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
		}

		.btn {
			width: 686rpx;
			height: 70rpx;
			background: #4082FD;
			border-radius: 36rpx;
			margin: 20rpx auto 0;
		}
	}
</style>
